<template>
  <KiFormDialog
    v-if="configModel.show"
    :show.sync="configModel.show"
    :title="configModel.title"
    v-model="configModel.data"
    :submit="submitForm"
    ref="formRef"
    :loading="configModel.loading"
  >
    <template #el-form>
      <!-- 新增分组 -->
      <template v-if="configModel.addType === 'addGroup'">
        <el-form-item label="分组名称" prop="groupName" verify>
          <el-input
            v-model="configModel.data.groupName"
            placeholder="请输入分组名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="分组编码" prop="groupNo" verify>
          <el-input
            v-model="configModel.data.groupNo"
            placeholder="请输入分组编码"
            clearable
          />
        </el-form-item>
        <h3 class="mt-20px">请输入默认配置项</h3>
      </template>
      <el-form-item v-else label="所属分组">
        <el-input v-model="configModel.data.groupName" disabled />
      </el-form-item>

      <el-form-item label="配置项名称" prop="title" verify>
        <el-input
          v-model="configModel.data.title"
          placeholder="请输入配置项名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="配置项KEY" prop="propName" verify>
        <el-input
          v-model="configModel.data.propName"
          placeholder="请输入配置项KEY"
          clearable
        />
      </el-form-item>
      <el-form-item label="配置项类型" prop="type" verify>
        <KiSelect
          v-model="configModel.data.type"
          :options="configType"
          placeholder="请选择配置项类型"
          :disabled="configModel.addType === 'editConfig'"
        />
      </el-form-item>
      <template v-if="configModel.data.type">
        <el-form-item
          v-if="configModel.data.type == 'string'"
          label="配置项值"
          prop="propValue"
          verify
        >
          <el-input
            v-model="configModel.data.propValue"
            placeholder="请输入配置值"
            clearable
          />
        </el-form-item>
        <!-- 编辑的时候文件不能回显，不必填了 -->
        <el-form-item
          v-if="configModel.data.type == 'blob'"
          label="配置文件"
          prop="propValue"
          :verify="{ required: configModel.addType !== 'editConfig' }"
        >
          <div
            v-if="configModel.addType === 'editConfig'"
            class="el-icon-folder text-30px"
          ></div>
          <Filepool
            :count="1"
            v-model="configModel.data.propValue"
            fileType="credentials"
            :placeholder="
              configModel.addType !== 'editConfig'
                ? '请上传配置文件'
                : '重新上传配置文件'
            "
            :upload="false"
          />
        </el-form-item>
        <el-form-item
          v-if="configModel.data.type == 'img'"
          label="图片"
          prop="propValue"
          verify
        >
          <Imgpond v-model="configModel.data.propValue" :count="1" />
        </el-form-item>
      </template>
    </template>
  </KiFormDialog>
</template>
<script>
import settings from '@/settings.js'
export default {
  name: 'add-config',
  data () {
    return {
      configType: [
        { dataName: '字符串', dataValue: 'string' },
        { dataName: '文件', dataValue: 'blob' },
        { dataName: '图片', dataValue: 'img' }
      ],
      configModel: {
        show: false,
        title: '新增配置项',
        addType: 'addGroup',
        loading: false,
        data: {
          groupName: '',
          groupNo: '',
          title: '',
          propName: '',
          type: '',
          propValue: ''
        }
      }
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 188
  },
  methods: {
    // 新增分组
    addGroup () {
      this.configModel.title = '添加分组'
      this.configModel.show = true
      this.configModel.addType = 'addGroup'
      this.configModel.data = {
        groupName: '',
        groupNo: '',
        title: '',
        propName: '',
        type: '',
        propValue: ''
      }
      this.$forceUpdate()
    },
    // 新增配置项
    addConfig (item) {
      this.configModel.title = '新增配置项'
      this.configModel.show = true
      this.configModel.addType = 'addConfig'
      this.configModel.data = {
        groupName: item.groupName,
        groupNo: item.groupNo,
        title: '',
        propName: '',
        type: '',
        propValue: ''
      }
      this.$forceUpdate()
    },
    editConfig (item) {
      this.configModel.title = '编辑配置项'
      this.configModel.show = true
      this.configModel.addType = 'editConfig'
      this.configModel.data = JSON.parse(JSON.stringify(item))
      this.$forceUpdate()
    },
    submitForm () {
      return new Promise((res, rej) => {
        let formData = new FormData()
        let d = this.configModel.data
        Object.keys(d).forEach(item => {
          if (item === 'propValue' && d.type === 'blob') {
            d[item] && formData.append('file', d[item])
          } else {
            formData.append(item, d[item])
          }
        })

        if (!d.domainId) {
          formData.append('domainId', import.meta.env.VITE_APP_domainId)
        }

        this.$POST(
          `sot-config-api/sys-config/${d.id ? 'update' : 'create'}`,
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        )
          .then(resData => {
            if (resData.errorCode == '00000') {
              if (this.configModel.addType == 'addGroup') {
                this.$emit('groupUpdate')
              } else {
                this.$emit('configItemUpdate')
              }
              this.$swal.success('提交成功')
              res()
            } else {
              rej()
            }
          })
          .catch(_ => {
            rej()
          })
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
